{% extends 'base.html' %}

{% block title %}个人仪表板 - AI学习智能体门户{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-md-3 col-lg-2 sidebar border-end">
            <div class="position-sticky pt-3">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'users:dashboard' %}">
                            <i class="fas fa-tachometer-alt me-2"></i>仪表板
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-robot me-2"></i>我的智能体
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-graduation-cap me-2"></i>我的课程
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-book me-2"></i>知识库
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-chart-line me-2"></i>学习分析
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-cog me-2"></i>设置
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">
                    <i class="fas fa-tachometer-alt me-2"></i>个人仪表板
                </h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-download me-1"></i>导出数据
                        </button>
                    </div>
                </div>
            </div>

            <!-- 欢迎信息 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card border-0 bg-primary text-white">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h5 class="card-title mb-2">
                                        欢迎回来，{{ user.get_full_name|default:user.username }}！
                                    </h5>
                                    <p class="card-text mb-0">
                                        今天也要保持学习的热情哦～
                                        {% if profile.study_streak > 0 %}
                                        您已经连续学习 {{ profile.study_streak }} 天了！
                                        {% endif %}
                                    </p>
                                </div>
                                <div class="col-md-4 text-end">
                                    {% if user.avatar %}
                                        <img src="{{ user.avatar.url }}" alt="头像" class="rounded-circle" width="80" height="80">
                                    {% else %}
                                        <i class="fas fa-user-circle fa-5x opacity-75"></i>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 48px; height: 48px;">
                                <i class="fas fa-robot"></i>
                            </div>
                            <h5 class="card-title">{{ total_agents }}</h5>
                            <p class="text-muted mb-0">我的智能体</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 48px; height: 48px;">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <h5 class="card-title">{{ total_courses }}</h5>
                            <p class="text-muted mb-0">学习课程</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 48px; height: 48px;">
                                <i class="fas fa-clock"></i>
                            </div>
                            <h5 class="card-title">{{ profile.total_study_time|default:0 }}</h5>
                            <p class="text-muted mb-0">学习时长(分钟)</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-3 mb-3">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 48px; height: 48px;">
                                <i class="fas fa-fire"></i>
                            </div>
                            <h5 class="card-title">{{ profile.study_streak|default:0 }}</h5>
                            <p class="text-muted mb-0">连续学习天数</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="row mb-4">
                <div class="col-12">
                    <h5 class="mb-3">快速操作</h5>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body text-center">
                                    <i class="fas fa-plus-circle fa-3x text-primary mb-3"></i>
                                    <h6 class="card-title">创建智能体</h6>
                                    <p class="card-text text-muted">创建一个新的AI学习助手</p>
                                    <button class="btn btn-primary btn-sm">开始创建</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body text-center">
                                    <i class="fas fa-search fa-3x text-success mb-3"></i>
                                    <h6 class="card-title">浏览课程</h6>
                                    <p class="card-text text-muted">发现新的学习内容</p>
                                    <button class="btn btn-success btn-sm">立即浏览</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body text-center">
                                    <i class="fas fa-upload fa-3x text-info mb-3"></i>
                                    <h6 class="card-title">上传文档</h6>
                                    <p class="card-text text-muted">向知识库添加新文档</p>
                                    <button class="btn btn-info btn-sm">上传文档</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="row">
                <div class="col-md-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-history me-2"></i>最近活动
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <!-- 活动项目将在这里显示 -->
                                <div class="text-center text-muted py-4">
                                    <i class="fas fa-inbox fa-3x mb-3"></i>
                                    <p>暂无最近活动</p>
                                    <small>开始学习后，您的活动将显示在这里</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-chart-pie me-2"></i>学习统计
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <canvas id="learningChart" width="200" height="200"></canvas>
                                <p class="text-muted mt-3">本周学习分布</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 简单的学习统计图表
const ctx = document.getElementById('learningChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['课程学习', '智能体对话', '知识库阅读'],
        datasets: [{
            data: [45, 35, 20],
            backgroundColor: [
                '#007bff',
                '#28a745',
                '#17a2b8'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
{% endblock %}